// #include "objj.h"
// // // 假设字体已正确声明，这里需替换为实际字体名，确保字体文件存在且编译引入
// // LV_FONT_DECLARE(fz); 

// // void create_ui(void) 
// // {
// //     // 创建按钮，lv_btn_create 返回 lv_obj_t* ，强转为 lv_btn_t* 消除类型警告
// //     lv_btn_t *btn = (lv_btn_t *)lv_btn_create(lv_scr_act());  
// //     if (btn == NULL) return;

// //     // 创建标签，父对象为按钮，强转类型
// //     lv_label_t *label = (lv_label_t *)lv_label_create((lv_obj_t *)btn);  
// //     if (label == NULL) return;

// //     // 设置标签文本
// //     lv_label_set_text((lv_obj_t *)label, "取消");  

// //     // 设置标签字体，注意参数是 lv_obj_t* 类型的 label 转换后的指针，按样式 API 传参
// //     lv_obj_set_style_text_font((lv_obj_t *)label, &fz, LV_PART_MAIN | LV_STATE_DEFAULT);  

// //     // 对齐按钮到屏幕中心
// //     lv_obj_align((lv_obj_t *)btn, LV_ALIGN_CENTER, 0, 0);  
// // }

// /**
//  * 滑块事件回调函数：当滑块值改变时，同步更新弧形控件的值
//  * @param e 事件对象，包含事件相关信息
//  */
// static void slider_event_cb(lv_event_t *e) 
// {
//     // 获取触发事件的滑块对象
//     lv_obj_t *slider = lv_event_get_target(e);
//     // 从事件中获取用户数据（这里是弧形控件对象）
//     lv_obj_t *arc = lv_event_get_user_data(e);
//     // 将滑块的当前值设置给弧形控件，实现同步
//     lv_arc_set_value(arc, lv_slider_get_value(slider));
// }

// /**
//  * 弧形控件事件回调函数：当弧形值改变时，同步更新滑块的值
//  * @param e 事件对象，包含事件相关信息
//  */
// static void arc_event_cb(lv_event_t *e) 
// {
//     // 获取触发事件的弧形控件对象
//     lv_obj_t *arc = lv_event_get_target(e);
//     // 从事件中获取用户数据（这里是滑块对象）
//     lv_obj_t *slider = lv_event_get_user_data(e);
//     // 将弧形控件的当前值设置给滑块，实现同步，同时启用动画效果
//     lv_slider_set_value(slider, lv_arc_get_value(arc), LV_ANIM_ON);
// }

// /**
//  * 测试函数：创建弧形控件和滑块控件，并实现两者的值双向绑定
//  */
// void test(void) 
// {
//     // 创建弧形控件对象，父对象为当前活动屏幕
//     lv_obj_t *arc = lv_arc_create(lv_scr_act());
//     // 设置弧形的旋转角度，270度表示0度位置在顶部（默认0度在右侧）
//     lv_arc_set_rotation(arc, 270);               
//     // 设置弧形背景的角度范围，0到360度表示一个完整的圆形背景
//     lv_arc_set_bg_angles(arc, 0, 360);           
//     // 设置弧形控件的取值范围为0到100
//     lv_arc_set_range(arc, 0, 100);               
//     // 设置弧形控件的初始值为0
//     lv_arc_set_value(arc, 0);                    
//     // 给弧形控件添加可点击标志，允许通过点击/拖动来调整其值
//     lv_obj_add_flag(arc, LV_OBJ_FLAG_CLICKABLE); 
//     // 设置弧形控件的位置：屏幕中央，Y轴方向向上偏移50像素
//     lv_obj_align(arc, LV_ALIGN_CENTER, 0, -50);

//     // 创建滑块控件对象，父对象为当前活动屏幕
//     lv_obj_t *slider = lv_slider_create(lv_scr_act());
//     // 设置滑块的取值范围为0到100，与弧形控件保持一致
//     lv_slider_set_range(slider, 0, 100);
//     // 设置滑块的位置：屏幕中央，Y轴方向向下偏移50像素
//     lv_obj_align(slider, LV_ALIGN_CENTER, 0, 50);

//     // 给滑块添加事件回调：当滑块值改变时，调用slider_event_cb
//     // 并将弧形控件作为用户数据传递，实现滑块控制弧形
//     lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, arc);
    
//     // 给弧形添加事件回调：当弧形值改变时，调用arc_event_cb
//     // 并将滑块作为用户数据传递，实现弧形控制滑块
//     lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_VALUE_CHANGED, slider);
// }

#include "objj.h"

// 声明自定义字体
LV_FONT_DECLARE(www); 

// 图片资源
LV_IMG_DECLARE(zzd);  // 假设的图片1
// LV_IMG_DECLARE(img2);  // 假设的图片2
// LV_IMG_DECLARE(img3);  // 假设的图片3
// LV_IMG_DECLARE(img4);  // 假设的图片4
// LV_IMG_DECLARE(img5);  // 假设的图片5
// LV_IMG_DECLARE(img6);  // 假设的图片6

// 定义图片数据结构
typedef struct {
    const void *img_src;
    const char *name;
} image_item_t;

// 图片列表
static image_item_t image_list[] = {
    {&zzd, "图片1"},
    // {&img2, "图片2"},
    // {&img3, "图片3"},
    // {&img4, "图片4"},
    // {&img5, "图片5"},
    // {&img6, "图片6"},
};
static uint32_t image_count = sizeof(image_list) / sizeof(image_list[0]);

// 声明界面对象
static lv_obj_t *main_screen;
static lv_obj_t *thumbnail_screen;

// 返回按钮事件处理
static void back_btn_event_handler(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) 
    {
        // 切换回主界面
        lv_scr_load(main_screen);
    }
}

// 创建返回按钮
static void create_back_button(lv_obj_t *parent)
{
    lv_btn_t *back_btn = (lv_btn_t *)lv_btn_create(parent);
    lv_obj_set_size((lv_obj_t *)back_btn, 100, 50);
    lv_obj_align((lv_obj_t *)back_btn, LV_ALIGN_TOP_LEFT, 20, 20);
    
    lv_label_t *label = (lv_label_t *)lv_label_create((lv_obj_t *)back_btn);
    lv_label_set_text((lv_obj_t *)label, "返回");
    lv_obj_set_style_text_font((lv_obj_t *)label, &www, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_align((lv_obj_t *)label, LV_ALIGN_CENTER, 0, 0);
    
    lv_obj_add_event_cb((lv_obj_t *)back_btn, back_btn_event_handler, LV_EVENT_CLICKED, NULL);
}

// 创建缩略图界面
static void create_thumbnail_screen(void)
{
    // 创建新界面
    thumbnail_screen = lv_obj_create(NULL);
    
    // 创建标题
    lv_obj_t *title = lv_label_create(thumbnail_screen);
    lv_label_set_text(title, "所有图片");
    lv_obj_set_style_text_font(title, &www, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(title, &www, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);
    
    // 创建返回按钮
    create_back_button(thumbnail_screen);
    
    // 创建滚动容器用于显示更多图片
    lv_obj_t *cont = lv_obj_create(thumbnail_screen);
    lv_obj_set_size(cont, lv_obj_get_width(thumbnail_screen) - 40, lv_obj_get_height(thumbnail_screen) - 120);
    lv_obj_align(cont, LV_ALIGN_CENTER, 0, 20);
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
    lv_obj_set_style_pad_all(cont, 10, 0);
    lv_obj_set_style_pad_row(cont, 15, 0);
    lv_obj_set_style_pad_column(cont, 15, 0);
    
   // 启用垂直滚动
    lv_obj_set_scroll_dir(cont, LV_DIR_VER);
    lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_AUTO);
    
    // 添加图片缩略图
    uint32_t col_count = 2;  // 每行显示2个缩略图
    uint32_t thumb_size = (lv_obj_get_width(cont) - (col_count + 1) * 15) / col_count;
    
    for(uint32_t i = 0; i < image_count; i++)
    {
        // 创建图片容器
        lv_obj_t *img_cont = lv_obj_create(cont);
        lv_obj_set_size(img_cont, thumb_size, thumb_size + 30);
        lv_obj_set_flex_flow(img_cont, LV_FLEX_FLOW_COLUMN);
        lv_obj_set_flex_align(img_cont, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
        
        // 创建缩略图
        lv_obj_t *img = lv_img_create(img_cont);
        lv_img_set_src(img, image_list[i].img_src);
        lv_obj_set_size(img, thumb_size, thumb_size);
        lv_obj_set_style_border_width(img, 2, 0);
        lv_obj_set_style_border_color(img, lv_color_hex(0xCCCCCC), 0);
        
        // 创建图片名称标签
        lv_obj_t *label = lv_label_create(img_cont);
        lv_label_set_text(label, image_list[i].name);
        lv_obj_set_style_text_font(label, &www, LV_PART_MAIN | LV_STATE_DEFAULT);
    }
    
}

// 按钮点击事件回调函数
static void btn1_event_handler(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) 
    {
        // "查看所有图片"按钮点击事件处理
        LV_LOG_USER("查看所有图片按钮被点击");
        // 切换到缩略图界面
        lv_scr_load(thumbnail_screen);
    }
}

// 其他按钮事件处理函数保持不变
static void btn2_event_handler(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) 
    {
        // "播放所选择的图片"按钮点击事件处理
        LV_LOG_USER("播放所选择的图片按钮被点击");
        // 此处添加具体功能实现
    }
}

static void btn3_event_handler(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) 
    {
        // "更改播放的图片"按钮点击事件处理
        LV_LOG_USER("更改播放的图片按钮被点击");
        // 此处添加具体功能实现
    }
}

static void btn4_event_handler(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED) 
    {
        // "编辑图片"按钮点击事件处理
        LV_LOG_USER("编辑图片按钮被点击");
        // 此处添加具体功能实现
    }
}

// 创建带点击事件的按钮
static lv_btn_t* create_button(const char* text, int x_offset, int y_offset, lv_event_cb_t event_cb)
{
    // 创建按钮
    lv_btn_t *btn = (lv_btn_t *)lv_btn_create(lv_scr_act());  
    if (btn == NULL) return NULL;

    // 放大按钮尺寸 (宽度和高度各增加50%)
    lv_obj_set_size((lv_obj_t *)btn, 200, 80);  // 原默认约120x50，这里改为200x80

    // 创建标签
    lv_label_t *label = (lv_label_t *)lv_label_create((lv_obj_t *)btn);  
    if (label == NULL) 
    {
        lv_obj_del((lv_obj_t *)btn);
        return NULL;
    }

    // 设置标签文本
    lv_label_set_text((lv_obj_t *)label, text);  

    // 设置字体和样式
    lv_obj_set_style_text_font((lv_obj_t *)label, &www, LV_PART_MAIN | LV_STATE_DEFAULT);  
    lv_obj_set_style_text_color((lv_obj_t *)label, lv_color_hex(0xFF0000), LV_PART_MAIN | LV_STATE_DEFAULT);  // 设置红色字体

    // 设置标签在按钮内居中对齐
    lv_obj_align((lv_obj_t *)label, LV_ALIGN_CENTER, 0, 0);

    // 相对于屏幕中心对齐，添加偏移量
    lv_obj_align((lv_obj_t *)btn, LV_ALIGN_CENTER, x_offset, y_offset);  

    // 添加点击事件
    if(event_cb != NULL) 
    {
        lv_obj_add_event_cb((lv_obj_t *)btn, event_cb, LV_EVENT_CLICKED, NULL);
    }

    return btn;
}

void create_ui(void)
{
    // 保存主屏幕引用
    main_screen = lv_scr_act();
    
    // 创建四个带点击事件的中心对称按钮
    create_button("查看所有图片", 180, 150, btn1_event_handler);
    create_button("播放所选择的图片", -180, 150, btn2_event_handler);
    create_button("更改播放的图片", -180, -150, btn3_event_handler);
    create_button("编辑图片", 180, -150, btn4_event_handler);
    
    // 预创建缩略图界面
    create_thumbnail_screen();
}